<template>
  <div class="main-content-box">
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'g6demo6',
  data () {
    return {
      data: {
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 100,
            label: '节点1',
            labelCfg: {
              position: 'top',
            },
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
            color: '#40a9ff',
            label: '节点2',
            labelCfg: {
              position: 'left',
              offset: 10,
            },
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
        ],
      }
    }
  },
  mounted () {
    this.getInit()
  },
  methods: {
    getInit () {
      // lineDash 的差值，可以在后面提供 util 方法自动计算

      /**
       * 边动画 虚线运动  开始
       */
      const dashArray = [
        [0, 1],
        [0, 2],
        [1, 2],
        [0, 1, 1, 2],
        [0, 2, 1, 2],
        [1, 2, 1, 2],
        [2, 2, 1, 2],
        [3, 2, 1, 2],
        [4, 2, 1, 2],
      ];

      const lineDash = [4, 2, 1, 2];
      const interval = 9; // lineDash 的和
      G6.registerEdge(
        'line-dash',
        {
          afterDraw (cfg, group) {
            // 获得该边的第一个图形，这里是边的 path
            const shape = group.get('children')[0];
            // 获得边的 path 的总长度
            const length = shape.getTotalLength();
            let totalArray = [];
            // 计算出整条线的 lineDash
            for (let i = 0; i < length; i += interval) {
              totalArray = totalArray.concat(lineDash);
            }

            let index = 0;
            // 边 path 图形的动画
            shape.animate(
              () => {
                // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
                const cfg = {
                  lineDash: dashArray[index].concat(totalArray),
                };
                // 每次移动 1
                index = (index + 1) % interval;
                // 返回需要修改的参数集，这里只修改了 lineDash
                return cfg;
              },
              {
                repeat: true, // 动画重复
                duration: 30, // 一次动画的时长为 3000
              },
            );
          },
        },
        'cubic',
      ); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic
      /**
       * 边动画 虚线运动  结束
       */

      /**
       * 边动画 远点沿线运动  开始
       */
      G6.registerEdge(
        'circle-running',
        {
          afterDraw (cfg, group) {
            // 获得当前边的第一个图形，这里是边本身的 path
            const shape = group.get('children')[0];
            // 边 path 的起点位置
            const startPoint = shape.getPoint(0);

            // 添加红色 circle 图形
            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            // 对红色圆点添加动画
            circle.animate(
              ratio => {
                // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
                // 根据比例值，获得在边 path 上对应比例的位置。
                const tmpPoint = shape.getPoint(ratio);
                // 返回需要变化的参数集，这里返回了位置 x 和 y
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true, // 动画重复
                duration: 3000, // 一次动画的时间长度
              },
            );
          },
        },
        'cubic',
      );
      /**
       * 边动画 远点沿线运动  结束
       */

      /**
       * 边动画 水流运动  结束
       */
      G6.registerEdge(
        'line-growth',
        {
          afterDraw (cfg, group) {
            const shape = group.get('children')[0];
            const length = shape.getTotalLength();
            shape.animate(
              ratio => {
                // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
                const startLen = ratio * length;
                // 计算线的lineDash
                const cfg = {
                  lineDash: [startLen, length - startLen],
                };
                return cfg;
              },
              {
                repeat: true, // 动画重复
                duration: 2000, // 一次动画的时长为 2000
              },
            );
          },
        },
        'cubic',
      );
      /**
       * 边动画 水流运动  结束
       */
      const width = document.getElementById('topoDemo').scrollWidth;
      const height = document.getElementById('topoDemo').scrollHeight || 500;
      const graph = new G6.Graph({
        container: 'topoDemo',
        width,
        height,
        modes: {
          default: ['collapse-expand', 'drag-canvas', 'drag-node'],
        },
        defaultNode: {
          size: 45,
          style: {
            fill: '#DEE9FF',
            stroke: '#5B8FF9',
          },
        },
        defaultEdge: {
          // type: 'line-dash',
          // type: 'circle-running',
          type: 'line-growth',
          style: {
            lineWidth: 2,
            stroke: '#bae7ff',
          },
        },
      });
      graph.data(this.data);
      graph.render();
    }
  }


}

</script>

<style scoped>
</style>